<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>easyEditor</title>
    <link rel="stylesheet" href="../css/easyeditor/demo.css">
    <script src="../js/easyeditor/easyEditor.js"></script>
</head>
<body>
<h1 style="text-align: center;">easyEditor</h1>
<div id="easyEditor"></div>
<div id="nav" class="clearfloat">
    <div id="emoji">
        <img id="emoji_btn" class="emoji_btn" src="../img/easyeditor/1.gif" alt="" title="插入表情" />
        <ul id="emoji_list">
            <li>
                <img src="../img/easyeditor/1.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/2.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/3.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/4.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/5.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/6.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/7.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/8.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/9.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/10.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/11.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/12.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/13.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/14.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/15.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/16.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/17.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/18.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/19.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/20.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/21.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/22.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/23.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/24.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/25.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/26.gif" alt="" />
            </li>
            <li>
                <img src="../img/easyeditor/27.gif" alt="" />
            </li>
        </ul>
    </div>
    <button id="atBtn">@某某</button>
    <button id="getTextBtn">获取内容Text</button>
    <button id="focusBtn">聚焦</button>
    <button id="blurBtn">失焦</button>
    <button id="setPositionStartBtn">光标定位前面</button>
    <button id="setPositionEndBtn">光标定位后面</button>
    <button id="selectAllBtn">选中所有内容</button>
    <button id="clearSelectBtn">删除选中内容</button>
    <button id="clearAllBtn">删除所有内容</button>
    <button id="changeLineBtn">换行</button>
    <button id="placeholderBtn">添加placeholder</button>
    <button id="closePlaceholderBtn">取消placeholder</button>
</div>
<div id="show"></div>
<script>
    var editor = easyEditor('easyEditor');

    //表情
    var emojiBtn = document.getElementById('emoji_btn');
    var emojiBox = document.getElementById('emoji_list');
    var emojiList = emojiBox.getElementsByTagName('img');
    //辦定事件添加表情
    for (var i = 0; i < emojiList.length; i++) {
        addEvent(emojiList[i], 'click', function () {
            var src = this.getAttribute('src');
            editor.insertEmoji({
                src: src,
                remark: '笑脸',
                data : {
                    id : 44
                }
            }); //添加表情
            emojiBox.style.display = 'none';
        });
    }

    //At人
    var atBtn = document.getElementById('atBtn');
    addEvent(atBtn, 'click', function () {
        //添加At人
        editor.insertBlock({
            text: '@某某',
            color: '#f00',
            data : {
                id : 123
            }
        });
    });

    //獲取text
    var showBox = document.getElementById('show');
    var textBtn = document.getElementById('getTextBtn');
    addEvent(textBtn, 'click', function () {
        var data = editor.getContent({
            emojiSign: ['[',']'], //表情分隔符
            blockSign: '%' //行块分隔符
        });
        var text = data.text
        showBox.innerHTML = htmlEncode(text);
    });

    //聚焦
    var focusBtn = document.getElementById('focusBtn');
    addEvent(focusBtn, 'click', function () {
        editor.focus();
    });

    //失焦
    var blurBtn = document.getElementById('blurBtn');
    addEvent(blurBtn, 'click', function () {
        editor.blur();
    });

    //光标定位前面
    var setPositionStartBtn = document.getElementById('setPositionStartBtn');
    addEvent(setPositionStartBtn, 'click', function () {
        editor.setPosition('start');
    });

    //光标定位后面
    var setPositionEndBtn = document.getElementById('setPositionEndBtn');
    addEvent(setPositionEndBtn, 'click', function () {
        editor.setPosition('end');
    });

    //选中所有内容
    var selectAllBtn = document.getElementById('selectAllBtn');
    addEvent(selectAllBtn, 'click', function () {
        editor.selectAll();
    });

    //删除选中内容
    var clearSelectBtn = document.getElementById('clearSelectBtn');
    addEvent(clearSelectBtn, 'click', function () {
        editor.clearSelect();
    });

    //删除所有内容
    var clearAllBtn = document.getElementById('clearAllBtn');
    addEvent(clearAllBtn, 'click', function () {
        editor.clearAll();
    });

    //换行
    var changeLineBtn = document.getElementById('changeLineBtn');
    addEvent(changeLineBtn, 'click', function () {
        editor.changeLine();
    });

    //添加placeholder
    var placeholderBtn = document.getElementById('placeholderBtn');
    addEvent(placeholderBtn, 'click', function () {
        editor.placeholder('我们从这里开始...');
    });

    //取消placeholder
    var closePlaceholderBtn = document.getElementById('closePlaceholderBtn');
    addEvent(closePlaceholderBtn, 'click', function () {
        editor.closePlaceholder();
    });

    //表情面板顯示
    addEvent(emojiBtn, 'click', function () {
        emojiBox.style.display = 'block';
    });
    //表情面板消失
    maskClick(emojiBox, function () {
        emojiBox.style.display = 'none';
    });

    function maskClick(el, func) {
        var str = str == undefined ? 'maskClick' : str;
        addEvent(document, 'mouseup', function (event) {
            var event = event || window.event;
            var target = event.target;
            if (!isParent(target, el)) {
                func && func();
            }
        });
    }
    function isParent(obj, parentObj) {
        while (obj != undefined && obj != null && obj.tagName != 'HTML' && obj.tagName.toUpperCase() != 'BODY') {
            if (obj == parentObj) {
                return true;
            }
            obj = obj.parentNode;
        }
        return false;
    }
    //事件辦定
    function addEvent(element, type, callback) {
        if (element.addEventListener) {
            element.addEventListener(type, callback, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, callback)
        }
    }
    //正则转换
    function htmlEncode(html) {
        var temp = document.createElement("div");
        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    }
</script>
</body>
</html>